<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="./ui-progress.js"></script>
</head>

<body>
    <!-- <style>
        .progress-container {
            width: 100%;
            margin-bottom: 8px;
        }

        .progress-title {
            text-align: center;
            font-size: 14px;
            color: rgba(102, 72, 234, 1);
            font-weight: 500;
            margin-bottom: 10px;
        }

        .progress-bar-wrap {
            display: flex;
            align-items: center;
            gap: 0 10px;
            margin-bottom: 5px;
        }

        .progress-bar {
            width: 100%;
            height: 8px;
            background-color: #e5e7eb;
            border-radius: 4px;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(270deg, rgba(111, 194, 250, 1) 0%, rgba(141, 137, 244, 1) 25%, rgba(132, 86, 233, 1) 77%, rgba(102, 72, 234, 1) 100%);
            border-radius: 4px;
            transition: width 0.3s ease;
        }

        .progress-percentage {
            font-size: 14px;
            color: rgba(102, 72, 234, 1);
            font-weight: 500;
        }

        .progress-text {
            text-align: center;
            font-size: 14px;
            color: #a855f7;
            flex-shrink: 0;
        }
    </style>

    <div class="progress-container">
        <div class="progress-title">
            上传文件
        </div>
        <div class="progress-bar-wrap">
            <div class="progress-bar">
                <div class="progress-fill" style="width: 100%;"></div>
            </div>
            <div class="progress-percentage">100%</div>
        </div>
        <div class="progress-text">
            正在上传当前文件大小1.96MB
        </div>
    </div> -->

    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
        }

        .demo-container {
            margin-bottom: 30px;
        }

        h2 {
            color: #333;
        }

        button {
            margin-top: 10px;
            padding: 5px 10px;
            background-color: #4285f4;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        button:hover {
            background-color: #3367d6;
        }
    </style>

    <div class="demo-container">
        <h2>进度条组件演示</h2>

        <ui-progress id="demo1" progress="0">
            <div class="progress-text111"></div>
        </ui-progress>

        <div>
            <button id="increase">增加进度</button>
            <button id="decrease">减少进度</button>
            <button id="reset">重置</button>
        </div>
    </div>

    <script>
        // 获取进度条元素和按钮
        const progressBar = document.getElementById('demo1');
        const increaseBtn = document.getElementById('increase');
        const decreaseBtn = document.getElementById('decrease');
        const resetBtn = document.getElementById('reset');

        document.querySelector('.progress-text111').innerHTML = '正在上传当前文件大小1.96MB';

        // 增加进度
        increaseBtn.addEventListener('click', () => {
            let currentProgress = parseInt(progressBar.getAttribute('progress')) || 0;
            currentProgress = Math.min(100, currentProgress + 10);
            progressBar.setAttribute('progress', currentProgress);
        });

        // 减少进度
        decreaseBtn.addEventListener('click', () => {
            let currentProgress = parseInt(progressBar.getAttribute('progress')) || 0;
            currentProgress = Math.max(0, currentProgress - 10);
            progressBar.setAttribute('progress', currentProgress);
        });

        // 重置进度
        resetBtn.addEventListener('click', () => {
            progressBar.setAttribute('progress', 13);
        });
    </script>
</body>

</html>